<template>
	<view class="content">
		<view class="private_sc">
			<view class="sc selected_color">私塾</view>
			<navigator hover-class="false" class="sc" url="/pages/parenting/parenting">亲子互</navigator>
		</view>
		<view class="schoold_show">
			<view v-if="isShow == 0">
				<view class="no_sch_bg">
					<image src="../../static/image/sc_bg.png" mode=""></image>
					<view class="top joinTop">
						<view>您还未申请私塾</view>
						<view class="addchild" @click="gotoApply()">申请私塾<i class="iconfont iconjiantou joinIcon"></i></view>
					</view>
				</view>
			</view>
			<view v-if="isShow == 1">
				<view class="bg">
					<view class="top pschoold-msg">
						<view class="clild-cont">
							<view class="qrCode iconfont iconerweima" @tap="lookQrCode"></view>
							<view class="child-name">{{privateSchool.classroom_name}} </view>
							<view class="clild-info">创建者：{{privateSchool.applicant}}</view>
							<view class="clild-info">创建时间：{{privateSchool.create_time}}</view>
						</view>
					</view>
				</view>
				<view class="menu">
					<navigator hover-class="none" class="item" :url="'./members?classroom_id=' + classRoomId">
						<i class="iconfont iconchengyuan"></i>
						<view class="menuName">成员</view>
					</navigator>
					<navigator hover-class="none" class="item" :url="'./invite-teacher/invite-teacher?student_id=' + stu_id + '&classroom_id=' + classRoomId">
						<i class="iconfont icontianjia"></i>
						<view class="menuName">添加成员</view>
					</navigator>
					<navigator hover-class="none" class="item" url="../group/my-groups?type=3">
						<i class="iconfont iconbanjiguanli-mian"></i>
						<view class="menuName">班级</view>
					</navigator>
				</view>
			</view>
			<view class="hr"></view>
			<view class="container">
				<!-- 没有加入私塾 -->
				<view class="noJoinBox" v-if="isShow == 0">
					<image class="noPrivateSchool" src="../../static/image/privateSchool-noPrivateSchool.png" mode=""></image>
					<text class="text">当前暂无私塾，快去申请吧~</text>
					<view class="applyBtn" @click="gotoApply">申请私塾</view>
				</view>
				<view class="myPrivateSchoolInfo" v-if="isShow == 1">
					<!-- 课表 -->
					<view class="tableView">
						<uni-table :classType="2" :isParent="2" :schoolId="classRoomId"></uni-table>
					</view>
				</view>
				<view @tap="gotoWait()" class="check" v-if="isShow == 2">
					<view class="wait-check">审核中<i class="iconfont iconfanhui"></i></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniTable from '@/components/table/table.vue';
	export default {
		components: {
			uniTable
		},
		data() {
			return {
				showSchoold: true,
				titledata: [{
						title: '私塾信息'
					},
					{
						title: "邀请老师"
					},
				],
				page: 1,
				isShow: 0,
				stu_id: 0,
				classRoomId: '',
				privateSchool: '',
				childClasses: [],
				currentChild: [],
				groupid: 0,
				subNVue: ''
			}
		},
		// 右上角
		onNavigationBarButtonTap(e) {
			// 二维码
			if (this.classRoomId) {
				uni.navigateTo({
					url: './invite-teacher/qrCode?classroom_id=' + this.classRoomId
				})
			} else {
				uni.showToast({
					icon: 'none',
					title: '请先申请私塾'
				})
			}
			// }
		},
		onShow() {
			uni.$on('createSchool', (data) => {
				console.log(JSON.stringify(data))
				if (data.classroom_name == '') {
					uni.showToast({
						title: '请输入私塾名称',
						icon: 'none'
					})
					return false
				}
				if (data.applicant == '') {
					uni.showToast({
						title: '请输入申请者姓名',
						icon: 'none'
					})
					return false
				}
				if (data.phone == '') {
					uni.showToast({
						title: '请输入练习方式',
						icon: 'none'
					})
					return false
				}
				var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
				if (reg.test(data.phone)) {
					this.$zapi.apiPost('user/Grade.User/AddClassRoom',data).then(res => {
						if (res.data.code == 200) {
							this.subNVue.hide("已申请", 200);
							setTimeout(() => {
								uni.navigateTo({
									url: '../check-private-school'
								})
							},200)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				} else {
					uni.showToast({
						title: '手机号错误',
						icon: 'none'
					})
				}
			})
			this.getPrivateSchoolMsg()
		},
		onUnload() {
			this.$off('select_chidren');
		},
		onLoad(e) {
			this.currentChild = uni.getStorageSync('currentChild')
			this.stu_id = this.currentChild.student_id
		},
		methods: {
			// 跳转到二维码页面 
			lookQrCode() {
				uni.navigateTo({
					url: './invite-teacher/qrCode?classroom_id=' + this.classRoomId
				})
			},
			// 获取私塾信息
			getPrivateSchoolMsg() {
				this.$zapi.apiPost('user/Grade.User/ClassRoomstate').then(res => {
					if (res.data.code == 200) {
						let data = res.data.data
						if (data.classroom_state == 1) {
							this.classRoomId = data.classroom_id
							this.isShow = 1
							this.privateSchool = data
							this.privateSchool.create_time = util.getFormatTime(this.privateSchool.create_time)
							this.privateSchool.update_time = util.getFormatTime(this.privateSchool.update_time)
							uni.setStorageSync('classroom_id', this.classRoomId); //缓存私塾ID
							// 获取到私塾id后获取孩子所有班级信息
							this.getChildClasses();
						} else if (data.classroom_state == 0) {
							this.isShow == 2
						}
					}
				})
			},
			// 前往待审核
			gotoWait() {
				uni.navigateTo({
					url: './check-private-school'
				})
			},
			// 申请
			gotoApply() {
				// 弹框
				//#ifdef APP-PLUS
				this.subNVue = uni.getSubNVueById('applypopup');
				// 弹出确认框
				this.subNVue.show('none', 300, function() {});
				//#endif
			},
			// 跳转班级作业记录
			linkWorkList(groupid, class_name) {
				uni.navigateTo({
					url: '../buyswork/class-work-list?groupid=' + groupid + '&class_name=' + class_name
				});
			},
			// 获取孩子班级列表
			getChildClasses() {
				let data = {
					'group_type': 2,
					'classroom_id': this.classRoomId
				}
				this.$zapi.apiPost('user/Grade.Homework/classHomework', data).then(res => {
					if (res.data.code == 200) {
						this.childClasses = res.data.data
						this.groupid = this.childClasses[0].groupid
					} else {
						this.childClasses = []
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	view {
		line-height: 1.2;
	}

	.pop_bg {
		position: fixed;
		z-index: 600;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
	}

	.pop_bg_item1 {
		position: absolute;
		right: 20upx;
		margin-top: 20upx;
		width: 30%;
		background-color: #ffffff;
		border-radius: 5upx;
	}

	.pop_bg_item1:before {
		content: "";
		position: absolute;
		display: inline-block;
		border-width: 18upx;
		border-style: solid;
		border-color: white transparent transparent transparent;
		transform: rotate(180deg);
		top: -30upx;
	}

	.pop_bg_item_left:before {
		right: 5%;
	}

	.left_item {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		font-size: 32upx;
		padding: 15upx 0;
		color: #333333;
	}

	.private_sc {
		width: 100%;
		height: 88upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background: #FFFFFF;

		.sc {
			line-height: 88upx;
			font-size: 34upx;
			color: #666666;
		}
		.selected_color {
			color: #FF9900 !important;
		}
	}

	.moreI {
		font-size: 40upx !important;
		margin: 0 10upx 0 0 !important;
		-webkit-text-fill-color: #333333 !important;
	}

	.uni-page-head-btn {
		margin-right: 16upx !important;
	}

	.bg {
		height: 322upx;
		width: 750upx;
	}

	.bg image {
		height: 322upx;
		width: 750upx;
		position: absolute;
	}

	.top {
		position: relative;
		display: flex;
	}

	.topImg {
		width: 100upx;
		height: 100upx;
		margin-top: 42upx;
		margin-left: 38upx;
		border-radius: 50%;
	}

	.topImg image {
		max-height: 100upx;
		max-width: 100upx;
		border-radius: 50%;
	}

	.no_sch_bg {
		height: 240upx;
		width: 690upx;
		margin: auto;
	}

	.no_sch_bg image {
		height: 240upx;
		width: 690upx;
		position: absolute;
		border-radius: 20upx;
	}

	.joinTop {
		margin: 0;
		text-align: center;
		color: #FFFFFF;
		display: block;
	}

	.joinTop view {
		font-size: 36upx;
		padding-top: 60upx;
		line-height: 1;
	}

	.addchild {
		display: inline-flex;
		align-items: center;
		padding-top: 30upx !important;
		font-size: 36upx;
	}

	.joinIcon {
		background: #FFFFFF;
		font-size: 50upx !important;
		margin: 0 !important;
		padding: 0 !important;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.clild-cont {
		margin-left: 46upx;
		padding-top: 44upx;
		line-height: 1;
	}

	.child-name {
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
		font-size: 36upx;
		font-weight: bold;
		margin-bottom: 34upx;
	}

	.clild-info {
		color: #FFFFFF;
		font-size: 28upx;
		margin-bottom: 30upx;
	}

	.clild_button {
		font-weight: Regular;
		font-size: 28upx;
		padding: 14upx 18upx;
		background: #FFFFFF;
		color: #FF9900;
		margin-top: -12upx;
		position: absolute;
		right: 32upx;
	}

	.people {
		font-size: 28upx;
		font-weight: Regular;
		color: white;
		margin-top: 34upx;
	}

	.class_brief {
		margin: 34upx 0 30upx 46upx;
		display: flex;
	}

	.border {
		border-left: 2px solid #00D5A2;
		height: 40upx;
	}

	.class_brief text {
		font-size: 34upx;
		font-weight: bold;
	}

	.class_brief_art {
		font-size: 34upx;
		font-weight: Regular;
		padding-left: 14upx;
	}

	.hr {
		background: #FAFAFA;
		height: 20upx;
	}
	
	.container{
		margin-bottom: 120upx;
	}

	.noJoinBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.noJoinBox .text {
		font-size: 26upx;
		color: #C2C2C2;
		margin: 50upx 0;
	}

	.noJoinBox .applyBtn {
		color: #FFFFFF;
		font-size: 32upx;
		padding: 24upx 76upx;
		background-color: #FF9900;
		border-radius: 8upx;
	}

	.noJoinBox .isApply {
		background-color: #CCCCCC !important;
	}

	.noJoinBox .noPrivateSchool {
		width: 360upx;
		height: 300upx;
		margin-top: 60upx;
	}

	.menu {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-bottom: 40upx;
	}

	.menu .item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu .iconfont {
		font-size: 64upx;
		margin-bottom: 10upx;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.menu .menuName {
		font-size: 32upx;
		color: #333333;
	}

	.iconchengyuan {
		background-image: -webkit-linear-gradient(270deg, #61D4FF, #00ACFE);
	}

	.iconbanjiguanli-mian {
		background-image: -webkit-linear-gradient(270deg, #FFC36A, #FF9900);
	}

	.iconshenhe {
		background-image: -webkit-linear-gradient(270deg, #B37AFF, #882DFF);
	}

	.icontianjia {
		background-image: -webkit-linear-gradient(270deg, #fb2c61, #fac362);
	}

	.tableView {
		margin: -48upx auto 20upx;
		width: 690upx;
		border-radius: 20upx;
		background: #ffffff;
		padding-bottom: 20upx;
	}

	.titleView {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80upx;
		border-bottom: 2upx solid #e5e5e5;
	}

	.title-left {
		width: 20%;
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
		margin-left: 30upx;
	}

	.title-right {
		width: 80%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.titleName {
		color: #666666;
		font-size: 30upx;
	}

	.titleActive {
		color: #ff9900;
	}

	.not_data {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.not_data i {
		margin-top: 20upx;
		font-size: 400upx;
		line-height: 300upx;
		color: rgba(229, 229, 229, 1);
	}

	.not_data_text {
		color: #c2c2c2;
		font-size: 42upx;
		line-height: 40upx;
	}

	.tableView {
		margin-top: 0;
	}

	.allClass {
		position: relative;
		top: -30upx;
	}

	.class {
		width: 100%;
		height: 75upx;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		border-radius: 20upx 20upx 0 0;
	}

	.class image {
		width: 284upx;
		height: 75upx;
	}

	.class-name {
		position: absolute;
		left: 20upx;
		color: #ffffff;
		font-size: 32upx;
		top: 12upx;
	}

	.class-art {
		width: 100%;
		height: 170upx;
		background: #ffffff;
		box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		position: relative;
		top: -10upx;
	}

	.class-check {
		display: inline-flex;
		font-size: 26upx;
		color: #999999;
		line-height: 60upx;
		position: absolute;
		right: 30rpx;
	}

	.iconjiantou {
		font-size: 26upx;
		color: #999999;
		line-height: 60upx;
	}

	.art1,
	.art2 {
		width: 628upx;
		display: flex;
		justify-content: space-between;
		margin: 0 30upx;
		height: 68upx;
		line-height: 68upx;
	}

	.art1 {
		padding-top: 30upx;
	}

	.art1-title1 {
		max-width: 360upx;
		color: #999999;
		font-size: 34upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.type {
		text-align: center;
		padding-right: 20upx;
		margin-right: 40upx;
		border-right: 2upx solid #e5e5e5;
		line-height: 1;
		height: 96upx;
		margin-top: 20upx;
		margin-left: auto;
	}

	.iconzuoye1 {
		font-size: 42upx;
		color: #ff9a04;
		line-height: 1;
	}

	.iconzuoye1,
	.art1-title2 {
		margin-right: 22upx;
	}

	.art1-title1 text {
		color: #333333;
	}

	.art1-title2 {
		color: #999999;
		font-size: 30upx;
		height: 60upx;
		line-height: 60upx;
	}

	.art1-title3 {
		color: #333333;
		font-size: 30upx;
		height: 60upx;
		line-height: 60upx;
		margin-right: 60upx;
	}

	.pschoold-msg {
		width: 690upx;
		height: 240upx;
		margin: 0 auto;
		margin-top: 30upx;
		background: url(../../static/image/sc_bg.png);
		background-size: 100%;
		position: relative;
	}

	.qrCode {
		width: 40upx;
		height: 40upx;
		font-size: 40upx;
		position: absolute;
		top: 46upx;
		right: 40upx;
	}

	.check {
		margin-top: 100upx;
		width: 100%;
	}

	.wait-check {
		width: 220upx;
		margin: auto;
		height: 80upx;
		line-height: 80upx;
		background: #FF9900;
		color: #FFFFFF;
		font-size: 36upx;
		text-align: center;
	}
</style>
